<!-- 订单 -->
<template>
    <div class="order">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部订单" name="whole">
                <orderLi orderState="0"></orderLi>
            </el-tab-pane>
            <el-tab-pane label="待付款" name="paid">
                <orderLi orderState="1"></orderLi>
            </el-tab-pane>
            <el-tab-pane label="待发货" name="shipped">
                <orderLi orderState="2"></orderLi>
            </el-tab-pane>
            <el-tab-pane label="待收货" name="received">
                <div class="unde">暂无数据</div>
            </el-tab-pane>
            <el-tab-pane label="待评价" name="evaluated">
                <orderLi orderState="4"></orderLi>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="completed">
                <div class="unde">暂无数据</div>
            </el-tab-pane>
            <el-tab-pane label="已取消" name="canceled">
                <orderLi orderState="6"></orderLi>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import orderLi from "./components/orderList.vue";
export default {
    name: "order",
    data() {
        return {
            activeName: "whole",
            list: [], //数据
        };
    },
    components: {
        orderLi
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab,event);
        },
    },
    mounted() {
        
    },
};
</script>
<style scoped lang="less">
.order {
    flex: 1;
    height: 100%;
    background: #fff;
    margin-bottom: 20px;
}
</style>
<style lang="less">
.order {
    .el-tabs--card>.el-tabs__header .el-tabs__nav {
        height: 60px;
        border-color: #f5f5f5;
    }
    .unde{
        text-align: center;
        font-size:14px;
        color:#999;
        padding-top:200px;
    }
    .el-tabs--card>.el-tabs__header .el-tabs__item {
        text-align: center;
        width: 110px;
        box-sizing: border-box;
        height: 57px;
        line-height: 60px;
        font-size: 16px;

        &:hover {
            color: #000;
        }

        border-color: #f5f5f5;
    }

    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
        height: 59px;
        border-top: 2px solid #27ba9b;
        color: #000;
        border-bottom-color: #fff;
    }

    .el-tabs__content {
        min-height: 915px;
        padding: 20px;
    }
}
</style>
